
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>主页</el-breadcrumb-item>
      <el-breadcrumb-item>财务管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺明细</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="acrd">
      <h5>账户明细</h5>
      <!-- 查询重置表单 -->
      <div class="form_div">
        <el-form
          :model="addFormList"
          :rules="addFormListRules"
          ref="addFormListRef"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="交易类型:" prop="name">
            <!-- @focus="change" -->
            <el-select v-model="value" clearable placeholder="请选择交易类型">
              <el-option v-for="item in arr" :key="item.user_id" :fs="item.user_fs" :value="item"></el-option>
            </el-select>
            <el-form-item label="订单号/提现订单号:" prop="user_number" class="el-form-item__content">
              <el-input type="Number" class="ipt" v-model="value4" placeholder="请输入你的订单号"></el-input>
              <!-- <input class="ipts" type="Number" v-model="addFormList.user_number"> -->
            </el-form-item>
            <el-form-item class="el-form-item__content" label="年份:" id="ipp">
              <el-select v-model="value1" clearable placeholder="请选择年份">
                <el-option
                  v-for="item in time"
                  :key="item.user_id"
                  :fs="item.user_fs"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- <span class="span3">日期:</span>
                  <el-input class="ipt" v-model="addFormList.user_time"></el-input>
                  <span class="span3">至</span>
              <el-input class="ipt" v-model="addFormList.user_time"></el-input>-->
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(value, value1)">查询</el-button>
            <el-button @click="handleReset(value, value1)">重置</el-button>
            <!-- <p class="ppp"><span class="spans">搜索温馨提示:&nbsp;&nbsp;</span>请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！</p> -->
            <el-alert
              title="请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！"
              type="warning"
              effect="dark"
              :closable ="false"
              >
            </el-alert>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple"> <span>总订单收款:&nbsp;</span> <span class="color">{{addFormList.user_zddmoeny}}</span> </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple"> <span>总订单退款金额: &nbsp;</span> <span class="color"> {{addFormList.user_ztkmoeny}} </span> </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple"> <span>总素材收益: &nbsp;</span> <span class="color"> {{addFormList.user_zscmoeny}} </span> </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple"> <span>总账户收益: &nbsp;</span> <span class="color"> {{addFormList.user_zzhmoeny}} </span> </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"> <span>已提现金额: &nbsp;</span> <span class="color"> {{addFormList.user_ytxmoeny}} </span> </div>
        </el-col>
      </el-row>
      <div>
        <el-table :data="allList" highlight-current-row style="width: 100%" ref="allListRef" align="center">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="交易类型" width="180" prop="user_fs"></el-table-column>
          <el-table-column label="订单号/提现单号" width="180" prop="user_number"></el-table-column>
          <el-table-column label="订单金额" width="180" prop="user_ddmoney"></el-table-column>
          <el-table-column label="交易时间" width="180" prop="user_time"></el-table-column>
          <el-table-column label="交易前余额" width="180" prop="user_zddmoeny"></el-table-column>
          <el-table-column label="交易后余额" width="180" prop="user_zzhmoeny"></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 4, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
          title="搜索温馨提示"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose">
          <div class="ts">请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！</div>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>

<script>
import '@/mock/zbsmock.js'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      queryInfo: {
        pagesize: 10,
        pagenum: 1
      },
      total: 0,
      addFormList: {},
      value: '',
      value1: '',
      value4: '',
      allList: [],
      arr: [],
      add: [],
      time: [],
      add1: [],
      dd: [],
      dd1: [],
      dd2: [],
      arr5: [],
      addFormListRules: {
        user_number: [
          { required: true, message: '请输入提现订单号', trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.dialogVisible = true
    this.getAccountDetails()
  },
  mounted() {
  },
  methods: {
    async getAccountDetails() {
      const { data: res } = await this.axios.get('/coupon', {
        params: {
          pagenum: this.queryInfo.pagenum,
          pagesize: this.queryInfo.pagesize
        }
      })
        this.add = res.data1.list
        this.total = res.total
        this.allList = res.data
        this.addFormList = res.data1.list
        this.addFormList.forEach((val, index) => { 
        this.addFormList = val
        this.dd.push(val.user_number)
        // if (!this.time.includes(val.user_time.split('-')[0])) {
        //   this.time.push(val.user_time.split('-')[0])
        // }
        if (!this.time.includes(val.user_time)) {
          this.time.push(val.user_time)
        }
        if (!this.arr.includes(val.user_fs)) {
          this.arr.push(val.user_fs)
        }
      })
    },
    handleReset(value, value1) {
      this.value = ''
      this.value1 = ''
      this.value4 = ''
      this.$refs.addFormListRef.resetFields()
      this.getAccountDetails()
    },
    handleSizeChange(PageSize) {
      this.queryInfo.pagesize = PageSize
      this.getAccountDetails()
    },
    handleCurrentChange(PageNum) {
      this.queryInfo.pagenum = PageNum
      this.getAccountDetails()
    },
    async submitForm(value, value1) {
      this.add1 = this.add.filter((item) => {
        return item.user_fs === value
      })
      // if (value === '' || this.value4.length !== 5 || value1 === '') {
      //   this.$message('订单号不能为空或者没选查询项')
      // } else {
      //   this.allList = this.add1
      //   this.total = this.allList.length
      // }
      // if (value !== '') {
      //   this.allList = this.add1
      //   this.total = this.allList.length
      // } else if (value1 !== '') {
      //   this.dd2 = this.allList.filter(item => {
      //         if (item.user_time === value1) {
      //           console.log(123)
      //           return this.dd2
      //         }
      //   })
      //   this.allList = this.dd2
      //   this.total = this.allList.length
      //   console.log(this.dd2.length)
      //   console.log(this.dd2)
      // } else if (this.value4.length !== 5 || this.value4 !== '') {
      //   console.log(Number(this.value4))
      //   this.dd1 = this.allList.filter(item => {
      //         if (item.user_number === Number(this.value4)) {
      //           console.log(123)
      //           return this.dd1
      //         }
      //   })
      //   this.allList = this.dd1
      //   this.total = this.allList.length
      //   console.log(this.dd1.length)
      // }
        await this.axios.get('/coupon', {
        params: {
          pagenum: this.queryInfo.pagenum,
          pagesize: this.queryInfo.pagesize
        }
      })
     if (value !== '' && this.value4 !== '' && value1 === '') {
        confirm('请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！')
          this.handleReset()
      } else if (value === '' && this.value4 !== '' && value1 !== '') {
        confirm('请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！')
        this.handleReset()
      } else if (value === '' && this.value4.length !== 5 && value1 === '') {
        confirm('单号输入超过5位数（格式不对）重新输入请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！')
        this.handleReset()
      } else if (value !== '' && this.value4 === '' && value1 !== '') {
        confirm('单号输入超过5位数（格式不对）重新输入请在搜索时注意，请保证除搜索之外选项为空，每次搜索完成时请点击重置按钮，谢谢！')
        this.handleReset()
      } else {
        if (value === '' && this.value4 === '' && value1 === '') {
          this.$message('搜索不能为空')
      } else if (value !== '' && this.value4 === '' && value1 === '') {
          this.allList = this.add1
          this.total = this.allList.length
      } else if (value === '' && value === '' && value1 !== '') {
          this.dd2 = this.allList.filter((item) => {
            if (item.user_time === value1) {
              return this.dd2
          }
        })
          this.allList = this.dd2
          this.total = this.allList.length
      } else if ((this.value4.length !== 5 || this.value4 !== '') && value1 === '') {
          this.dd1 = this.allList.filter((item) => {
          if (item.user_number === Number(this.value4)) {
          return this.dd1
      }
        })
          this.allList = this.dd1
          this.total = this.allList.length
      } else if (value !== '' && value1 !== '' && this.value4 !== '') {
          this.arr5 = this.add.filter(item => {
            if (item.user_fs === value && item.user_number === Number(this.value4) && item.user_time === value1) {
              return this.arr5
            }
          })
          this.allList = this.arr5
          this.total = this.allList.length
      }
      }
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-alert {
    width: 60%;
    padding: 0px 8px;
    margin: 20px 0 0 0;
    height: 20px;
    border-radius: 24px;
}
.ts {
font-size: 16px;
color: tomato;
}
.ppp{
  font-size: 12px;
  color: tomato;
}
.form_div {
  border: 1px solid greenyellow;
  box-shadow: 0 0 2px #ccc;
  padding: 10px 0;
  margin-bottom: 10px;
  border-radius: 30px;
}
.span3 {
  margin: 0 12px;
}
.acrd {
  padding: 0px;
}
.account-moeny {
  margin: 0px 0px 15px 40px;
}
.span {
  font-weight: 800;
  font-size: 20px;
}
.span1 {
  font-size: 15px;
  font-weight: 400;
}
.color {
  font-size: 16px;
  color: tomato;
}
.size {
  font-size: 30px;
  color: #ff0d0d;
}
.ipt {
  width: 160px;
  margin-left: 4px;
}
/deep/ .el-input__inner {
  padding: 0 5px;
}
.el-form-item__content {
  display: inline-block;
  margin: 0 10px;
}
/deep/ .el-form-item__label {
  font-size: 13px;
  padding: 0px;
}
/deep/ .grid-content {
  width: 200px;
  font-size: 14px;
}
/deep/ .el-table td {
  font-size: 16px;
}
</style>
